<template>
	<view class="expert-detail-wrap">
		<view class="index-top-box" :style="{'padding-top':topNavBarFixHeight+'px'}">
			<view class="return-icon" @tap="returnToPrePage">
				<image class="return-icon-img" src="../../static/leftArrowIconWhite.png"></image>
			</view>
		</view>
		<view class="fill-shim" :style="{'padding-top':topNavBarFixHeight+'px'}"></view>

		<view class="expert-basic-msg" v-if="userDetail">
			<view class="expert-basic-msg-bg"></view>
			<view class="expert-basic-msg-content">
				<view class="expert-msg1">
					<view class="expert-name-pos">
						<view class="expert-name">
							<text class="name-text">{{userDetail.nickName}}</text>
							<image class="gender-icon" v-if="userDetail.sex == 2" src="../../static/femaleIcon.png"></image>
							<image class="gender-icon" v-else src="../../static/maleIcon.png"></image>
						</view>
						<view class="pos-text">{{userDetail.address || ''}}</view>
					</view>
					<image class="expert-avatar" :src="getImgUrl(userDetail.avatar)" mode=""></image>
				</view>
				<view class="expert-msg2">
					<view class="expert-comp-name">{{userDetail.company || ''}}</view>
					<view class="expert-pos">{{userDetail.position || ''}}</view>
				</view>

				<view class="comment-num-msg">
					<view class="comment-num-item">
						<view class="item-num">{{userDetail.countOfLiked}}</view>
						<view class="item-name">被关注</view>
					</view>
					<view class="comment-num-item" @tap.stop="toUserCircle">
						<view class="item-num">{{userDetail.countOfEvaluating}}</view>
						<view class="item-name">发点评</view>
					</view>
					<view class="comment-num-item">
						<view class="item-num">{{userDetail.countOfEvaluated}}</view>
						<view class="item-name">被点评</view>
					</view>
				</view>

				<view class="remark-pos">
					<image v-show="collectFlag" @tap.stop="toggleCollert" class="collect-icon" src="../../static/collectIocnYellow.png"></image>
					<image v-show="!collectFlag" @tap.stop="toggleCollert" class="collect-icon" src="../../static/collectIocnGrey.png"></image>
					<text class="pos-text">{{userDetail.identityDesc || ''}}</text>
				</view>
			</view>
		</view>

		<view class="other-msg-block" v-if="userDetail && userDetail.userTags.length > 0">
			<view class="block-title">喜好</view>
			<view class="tag-icons">
				<image class="tag-img" v-for="(item,index) in userDetail.userTags.slice(0,5)" :src="getImgUrl(item.tagId)" :key="index"></image>
			</view>
		</view>

		<view class="other-msg-block" v-if="userDetail && userDetail.selfDecription">
			<view class="block-title">自述</view>
			<view class="self-account">
				{{userDetail.selfDecription}}
			</view>
		</view>

		<view class="add-friend-btn-wrap" v-if="isNotSelf">
			<largeBtn @btnClk="toAddFriend" v-if="!isMyFriend">加为好友</largeBtn>
			<largeBtn @btnClk="toChatRoom" v-else>去聊天</largeBtn>
		</view>
	</view>
</template>

<script>
    import { mapState } from "vuex"
	export default {
		data() {
			return {
				userDetail:null,
				topNavBarFixHeight: 0,
				collectFlag: false,
				userId:''
			}
		},
		computed: {
			...mapState(['friendList','userInfo']),
			isMyFriend(){
				const reslut = this.friendList.find((item)=>{
					return item.userId == this.userId
				})
				if(reslut){
					return true
				}
				return false
			},
			isNotSelf(){
				return this.userInfo.id != this.userId
			}
		},
		onLoad(options){
			this.userId = options.id
			this.linkId = options.linkId
			this.evaId = options.evaId
			this.getUserDetail()
		},
		created() {
			this.topNavBarFixHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			toggleCollert(){
				if(this.isDealFollow) return
				this.isDealFollow = true
				if(this.collectFlag){
					this.unfollow()
				}else{
					this.follow()
				}
			},
			unfollow(){
				this.$api.unfollowUser(this.userId).then(res=>{
					this.collectFlag = !this.collectFlag
					this.getUserDetail()
				})
			},
			follow(){
				this.$api.followUser(this.userId).then(res=>{
					this.collectFlag = !this.collectFlag
					this.getUserDetail()
				})
			},
			returnToPrePage(){
				uni.navigateBack({
				    delta: 1
				});
			},
			toAddFriend(){
				uni.navigateTo({
					url: `/pages/myFriends/addFriendsApply?toId=${this.userId}&linkId=${this.linkId}&evaId=${this.evaId}`
				})
			},
			getUserDetail(){
				this.$api.getUserInfoById(this.userId).then(res=>{
					this.isDealFollow = false
					this.collectFlag = res.isFllowed
					this.userDetail = res
				}).catch(()=>{
					this.isDealFollow = false
				})
			},
			toUserCircle(){
				uni.navigateTo({
					url: `/pages/userDetail/index?id=${this.userId}`
				})
			},
			toChatRoom(){
				uni.navigateTo({
					url: `/pages/message/privateChat?to=${this.userId}`
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F3F7FD;
	}
</style>
<style lang="less" scoped>
	.expert-detail-wrap {
		// padding-bottom: 40rpx;
	}

	.index-top-box {
		width: 750rpx;
		height: 130rpx;
		box-sizing: border-box;
		background-color: #3399FF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		padding: 0 56rpx;

		.return-icon {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.return-icon-img {
				width: 56rpx;
				height: 56rpx;
			}
		}

	}

	.fill-shim {
		box-sizing: border-box;
		height: 130rpx;
	}

	.expert-basic-msg {
		.expert-basic-msg-bg {
			width: 750rpx;
			height: 154rpx;
			background-color: #3399FF;
		}

		.expert-basic-msg-content {
			position: relative;
			top: -108rpx;
			background-color: #FFFFFF;
			padding: 48rpx 40rpx 36rpx 40rpx;
			width: 690rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			box-sizing: border-box;
			box-shadow: 0 4rpx 8rpx 0 rgba(218, 227, 248, 0.5);

			.expert-msg1 {
				height: 120rpx;
				display: flex;
				justify-content: space-between;

				.expert-name-pos {
					.expert-name {
						display: flex;
						align-items: center;

						.name-text {
							font-size: 48rpx;
							font-weight: 500;
							color: #333333;
							line-height: 66rpx;
						}

						.gender-icon {
							margin-left: 26rpx;
							width: 32rpx;
							height: 40rpx;
						}
					}

					.pos-text {
						margin-top: 12rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
					}
				}

				.expert-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.expert-msg2 {
				margin-top: 32rpx;

				.expert-comp-name {
					font-size: 32rpx;
					font-weight: 400;
					color: #666666;
					line-height: 44rpx;
				}

				.expert-pos {
					margin-top: 10rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
			}

			.comment-num-msg {
				margin-top: 56rpx;
				display: flex;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #eee;

				.comment-num-item {
					margin-right: 50rpx;

					.item-num {
						font-size: 32rpx;
						font-weight: 500;
						color: #666666;
						line-height: 44rpx;
						margin-bottom: 2rpx;
					}

					.item-name {
						font-size: 26rpx;
						font-weight: 400;
						color: #9196A0;
						line-height: 36rpx;
					}
				}
			}

			.remark-pos {
				padding-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			
				.collect-icon{
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}	
				.pos-text{
					font-size: 36rpx;
					font-weight: 600;
					color: #666666;
					line-height: 50rpx
				}
			}
		}
	}

	.other-msg-block {
		position: relative;
		top: -108rpx;
		background-color: #FFFFFF;
		padding: 40rpx 40rpx 28rpx 40rpx;
		width: 690rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		box-shadow: 0 4rpx 8rpx 0 rgba(218, 227, 248, 0.5);

		.block-title {
			padding-bottom: 20rpx;
			padding-left: 8rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #666666;
			line-height: 44rpx;
			border-bottom: 2rpx solid #F2F6FD;
		}

		.tag-icons {
			padding-top: 28rpx;
			display: flex;

			.tag-img {
				margin-left: 20rpx;
				width: 96rpx;
				height: 96rpx;
			}
		}

		.self-account {
			padding: 14rpx 8rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
			line-height: 44rpx;
			box-sizing: border-box;
			min-height: 140rpx;

		}
	}

	.add-friend-btn-wrap {
		position: fixed;
		left: 40rpx;
		bottom: 48rpx;
		width: 670rpx;
	}
</style>
